$(function() {
	let page = 0,
		imgData = null,
		isRun = false;
	let queryData = () => {
		page++;
		$.ajax({
			url: `json/data.json?page=${page}`,
			method: 'get',
			async: false,
			dataType: 'json',
			success: result => {
				imgData = result;
			}
		});
	};
	queryData();
	console.log(imgData)


	// 数据绑定：每三个为一组，
	// 传递一个对象返回对应的结构字符串
	let queryHtml = ({
			id,
			pic,
			link,
			title
		}) =>
		`
    <a href="${link}">
            <div><img src="${pic}" alt=""></div>
            <span>${title}</span>
        </a>
    `


	let $boxList = $('.flowBox li') //类数组对象

	let boxList = $boxList.get() //jq类数组转为数组 里面是原生jq对象
	// let boxList1=[].slice.call($boxList)
	// let boxList2=Array.from($boxList)
	// console.log(boxList1,boxList2)


	for (let i = 0; i < imgData.length; i += 3) {
		let item1 = imgData[i]
		let item2 = imgData[i + 1]
		let item3 = imgData[i + 2]
		boxList.sort((a, b) => a.offsetHeight - b.offsetHeight)
		// console.log(item1)
		if (item1) {
			boxList[0].innerHTML += queryHtml(item1)
		}
		if (item2) {
			boxList[1].innerHTML += queryHtml(item2)
		}
		if (item3) {
			boxList[2].innerHTML += queryHtml(item3)
		}
		// 接下来把获取的item一次插入到每一个li中，高度从小到大依次排序 a,b是每一个源js
	}
	


})
